<template>
  <!--    车辆申请-->
  <el-scrollbar height="660px">
  <div class="vehicle_application">
    <div class="vehicleHead">
        用车申请
    </div>
    <div class="vehicleForm">
        <el-form :rules="applicationRule" :model="applicationForm" ref="applyForm"  label-width="120px" style="width: 100% ; display: flex;
                          flex-wrap: wrap;
                          justify-content: center;
                          align-items: center;
                          margin-top: 30px;">
          <el-form-item label="标题" prop="applyTitle">
            <el-input v-model="applicationForm.applyTitle" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="申请人" prop="applyUser">
            <el-input v-model="applicationForm.applyUser" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="用车部门" prop="vehicleDepartment">
            <el-select v-model="applicationForm.vehicleDepartmentId" placeholder="请选择" style="width: 300px">
<!--              <el-option label="后勤" value="后勤" />-->
<!--              <el-option label="人事" value="人事" />-->
              <el-option
                  v-for="item in departmentList"
                  :key="item.departmentId"
                  :label="item.departmentName"
                  :value="item.departmentId"
                  @click="wwa(applicationForm.vehicleDepartmentId)"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="车辆" prop="vehicleNumber">
            <el-select v-model="applicationForm.vehicleNumber" placeholder="车牌号" style="width: 300px">
                <el-option v-for="item in d.vehicleTable"
                           :key="item.occupiedVehicleNumber"
                            :label="item.occupiedVehicleNumber"
                            :value="item.occupiedVehicleNumber"/>
            </el-select>
          </el-form-item>

          <el-form-item label="司机" prop="applyDriver">
            <el-input v-model="applicationForm.applyDriver" style="width: 300px"/>
          </el-form-item>

          <el-form-item label="开始时间" prop="startTime">
            <el-col :span="11">
              <el-date-picker
                  v-model="applicationForm.startTime"
                  type="date"
                  placeholder="开始时间"
                  style="width: 300px"
              />
            </el-col>
          </el-form-item>

          <el-form-item label="结束时间" prop="endTime">
          <el-col :span="11">
            <el-date-picker
                v-model="applicationForm.endTime"
                type="date"
                placeholder="预计结束时间"
                style="width: 300px"
            />
          </el-col>
        </el-form-item>

          <el-form-item label="事由" prop="subjectMatter">
            <el-input v-model="applicationForm.subjectMatter" style="width: 720px"/>
          </el-form-item>
        </el-form>
      <span>
        <el-button type="primary" @click="onSubmit(applyForm)">提 交</el-button>
        <el-button @click="reset()">重   置</el-button>
      </span>

    </div>

<!--    <div>-->
<!--      <span style="font-size: 14px">以下为车辆情况:</span>-->
<!--    </div>-->

    <div class="vehicleTable">
      <el-table :data="d.tableData" style="width: 100%" height="300">
        <el-table-column prop="occupiedModelNo" label="车辆编号" align="center" />
        <el-table-column prop="occupiedVehicleNumber" label="车牌号"  align="center"/>
        <el-table-column prop="occupiedState" label="是否使用"  align="center">
          <template #default ="s" >
            <div v-if="s.row.occupiedState == 0" style="width: 80%;
            height: 90%;
            margin: 0 12% ;
            border-radius: 10px ;
            color: #909399;
            background: #f4f4f5;
            border-color: #d3d4d6;">
              暂无预定
           </div>
            <div v-if="s.row.occupiedState == 1" style="width: 80%;
            height: 90%;
            margin: 0 12% ;
            border-radius: 10px ;
            color: #71e2a3;
            background-color: #e7faf0;
            border-color: #d0f5e0;">
              正在使用中
            </div>
            <div v-if="s.row.occupiedState == 2" style="width: 80%;
            height: 90%;
            margin: 0 12% ;
            border-radius: 10px ;
            background-color: #ffeded;
            border-color: #ffdbdb;
            color: #ff4949;">
              预定中
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="occupiedStartTime" label="预定时间" align="center">
          <template #default ="s" >
            <div v-if="s.row.occupiedStartTime != null">
                {{s.row.occupiedStartTime}}
            </div>
          <div v-if="s.row.occupiedStartTime == null" style="width: 80%;
            height: 90%;
            margin: 0 12% ;
            border-radius: 10px ;
            color: #909399;
            background: #f4f4f5;
            border-color: #d3d4d6;">
            暂无
          </div>
          </template>
        </el-table-column>
        <el-table-column prop="occupiedEndTime" label="预计结束时间" align="center" >
          <template #default = "s">
            <div v-if="s.row.occupiedEndTime != null">
              {{s.row.occupiedEndTime}}
            </div>
            <div v-if="s.row.occupiedEndTime == null" style="width: 80%;
              height: 90%;
             margin: 0 12% ;
              border-radius: 10px ;
              color: #909399;
              background: #f4f4f5;
              border-color: #d3d4d6;">
              暂无
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:currentPage="d.pageNo"
          v-model:page-size="d.pageSize"
          :page-sizes="[5,10,]"
          small="small"
          layout="total, prev, pager, next, jumper"
          :total="d.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="background-color: #FFFFFF"/>
    </div>

  </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref, toRefs, inject, onMounted} from "vue";
import type {FormInstance, FormRules} from 'element-plus'
import axios from 'axios'
import {ElMessage} from "element-plus";




const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  //数据
  tableData:[],
  //车辆表的数据
  vehicleTable:[],
})

//定义一个编号的时间戳
var time = new Date().getTime();


//定义表单组件对象
const applyForm = ref<FormInstance>();

/**
 * 表单数据模型
 */
const applicationForm = reactive({
  applyId : null ,
  //申请单编号
  applyNo : 'S'+time,
  // 标题
  applyTitle : '',
  // 申请人
  applyUser:'',
  // 用车部门
  vehicleDepartment:'',
  //用车部门id
  vehicleDepartmentId:'',
  // 车辆
  vehicleNumber : '',
  // 司机
  applyDriver : '',
  // 开始时间
  startTime : '',
  // 结束时间
  endTime : '',
  //  事由
  subjectMatter:'',
  //申请单的状态
  applyState : 0 ,
})


const OccupiedTable=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(OccupiedTable.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}
const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}

//部门数据模型
const departmentList= ref([])

//记载部门数据
onMounted(()=>{
  axios.get(`http://localhost:1688/department_con/alldepartments`).then((res)=>{
    departmentList.value= res.data.data
  })
})

//查询出车辆使用小表
const getData =()=> {
  axios.post("http://localhost:1688/vehicleOccupied/selectState").then((res) =>{
    console.log(res.data.data)
    var data = res.data.data;
    //放入表格中
    OccupiedTable.value = data;
    console.log(OccupiedTable.value);
    //获取到表格数据长度
    d.total = res.data.data.length;
    //调用前端分页方法
    getTabelData();
  }).catch()
}



/**
 * 自定义表单校验
 */
const applicationRule = reactive<FormRules>({
  applyTitle:[
    {required:true,message:'不能为空',trigger:['blur','change']}
  ],
  applyUser:[
    {required:true,message:'不能为空',trigger:['blur','change']}
  ],
  applyDriver:[
    {required:true,message:'不能为空',trigger:['blur','change']}
  ],
  subjectMatter : [
    {required:true,message:'不能为空',trigger:['blur','change']}
  ],
})

//页面刷新方法
const reload = inject('reload')

/**
 * 新增车辆申请单记录
 */
const onSubmit = async (formEl: FormInstance | undefined)=>{
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {//校验通过
      axios.post("http://localhost:1688/vehicleApply/addApply" , applicationForm).then((res=>{

        const val =res.data;
        console.log(val)
        if(val.code==403){
          ElMessage.error("权限不足")
        }else {
          ElMessage({
            message: '提交成功',
            type: 'success'
          });
        }

        reload()
      })).catch()
      console.log(applicationForm)
    } else {
      ElMessage.error('提交失败,请重试');
    }
  })
}

const reset = () =>{
  reload()
}

/**
 * 查询出所有未封存的车辆
 */
const vehicleTable = () =>{
  axios.post("http://localhost:1688/vehicleOccupied/selectOccupiedState").then((res)=>{
    console.log(res.data.data)
    //数据赋值
    var data = res.data.data
    //数据存储
    d.vehicleTable = data
  }).then()
}
const wwa=(value)=>{
  console.log("下拉框"+value)
}

//加载数据
onBeforeMount(() =>{
  getData()
  vehicleTable()
})



</script>

<style>
  .vehicle_application{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .vehicleHead{
    text-align: center;
    color: #2DB7F5;
    font-size: 30px;
    /*margin-top: 50px;*/
    /*border: 1px solid black;*/
    width: 90%;
    height: 100px;
    line-height: 100px;
    display: flex;
    justify-content: center;
    background-color: #FFFFFF;
    border-radius:  20px;
  }
  .vehicleForm{
    /*border: 1px solid black;*/
    width: 90%;
    height: 350px;
    background-color: #FFFFFF;
    border-radius:  20px;
    margin-top: 10px;
    text-align: center;
  }
  .vehicleTable{
    width: 90%;
    margin-top: 10px;
    border-radius:  20px;
  }
</style>